#{extends 'main.html' /}
#{set title:'Give2Get - Send Message' /}


<div class="maincontainer">

	 <!-- Inbox -->
	 <div id="messageBox" class="round">
	 	  <p class="table_title">Messages Between You and ${senderFullName}</p>
	    	#{list messageDetails, as:'message'}
	    	#{if message.receiverId == user.id}
	      <div id="message">
	      	<div id="user_photo"><img src="/public/images/char_1.png" /></div>
	        <div id="message_details">
                <span id="activity_name">
                   <a href="/user/${message.userId}">${senderFullName}</a>
                </span>

                <span id="message_date">
                    <span id="timeago">received at ${message.sendDate}</span>
                </span>
                <br />
                <span id="messageText">${message.message.length() > 70 ? message.message[0..70] + '..' : message.message}</span>
            </div>
	      </div>
	        #{/if}
	        
	        #{if message.receiverId != user.id}
	      <div id="message">
	      	<div id="user_photo"><img src="/public/images/char_1.png" /></div>
	        <div id="message_details">
                <span id="activity_name">
                   <a href="/user/${message.userId}">${receiverFullName}</a>
                </span>

                <span id="message_date">
                    <span id="timeago">send at ${message.sendDate}</span>
                </span>
                <br />
                <span id="messageText">${message.message.length() > 70 ? message.message[0..70] + '..' : message.message}</span>
            </div>
	      </div>
	        #{/if}
	      #{/list}
	</div>
	<div id=messageTypes class="round">
        <p class="table_title">MessageBox</p>
        <span id="messageType"><a href="/inbox/${session.get("userid")}">Inbox (${unreadMessageCount})</a></span>
		<span id="messageType"><a href="/getNotification/">Notification(${unreadNotificationCount})</a></span>
	</div>
	<div id="messageBox" class="round">
		<div id="message">
		<form id="add_new_service_form" action="/replyMessage/" method="POST" accept-charset="utf-8" enctype="application/x-www-form-urlencoded" >
			<textarea class="replyMessage" title="Reply" name="message" rows="1" placeholder="Repyl message" style="height: 34px;width:500px "></textarea>
			<input type="image" src="@{'/public/images/reply.png'}" name="Reply" value="Reply"/>
			<input type="hidden" name="receiverId"  value="${userId}"/>
		</form>
		</div>
	</div>
</div>